<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" pad15="">

                        <div class="layui-form" wid100="" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">广告标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" value="" class="layui-input" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">显示端</label>
                                <div class="layui-input-block">
                                    <input type="radio" value="1" name="equipment" title="PC" lay-filter="equipment"
                                        checked />
                                    <input type="radio" value="2" name="equipment" title="APP" lay-filter="equipment" />
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">广告位置</label>
                                <div class="layui-input-block">
                                    <select name="type" lay-filter="type_select" lay-verify="required" id="typeSelect">
                                        <option value="6">首页背景图（1920*647）</option>
                                        <option value="10">直播页轮播图(1620*180)</option>
                                        <option value="11">顶部导航背景图(1920*68)</option>
                                        <option value="12">商城首页轮播图(1920*68)</option>
                                        <option value="13">主播页广告</option>
                                        <option value="14">直播间弹窗广告</option>
                                        <option value="15">直播间绑定广告</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">有效期</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="start_time" class="layui-input" id="start_date" readonly
                                        placeholder="开始日期" lay-verify="required">
                                </div>
                                <div class="layui-input-inline" style="width:30px;text-align: center;line-height: 38px">
                                    至
                                </div>
                                <div class="layui-input-inline" id="maindiv">
                                    <input type="text" name="end_time" class="layui-input" id="end_date" readonly
                                        placeholder="结束日期" lay-verify="required">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">图片</label>
                                <div class="layui-input-inline">
                                    <input name="image_url" lay-verify="required" id="LAY_imgSrc"
                                        placeholder="请上传图片或输入地址" value="" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                    <button type="button" class="layui-btn layui-btn-primary" id="LAY_imgUpload">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                    <button class="layui-btn layui-btn-primary"
                                        layadmin-event="imgPreview">查看图片</button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">绿包用图片</label>
                                <div class="layui-input-inline">
                                    <input name="sem_image_url" lay-verify="required" id="LAY_imgSrcSEM"
                                        placeholder="请上传图片或输入地址" value="" class="layui-input">
                                </div>
                                <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                    <button type="button" class="layui-btn layui-btn-primary" id="LAY_imgUploadSEM">
                                        <i class="layui-icon">&#xe67c;</i>上传图片
                                    </button>
                                    <button class="layui-btn layui-btn-primary"
                                        layadmin-event="imgPreviewSEM">查看图片</button>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">跳转类型</label>
                                <div class="layui-input-block">
                                    <select name="jump_type" lay-filter="jump_type" id="jumpType" lay-verify="required">
                                        <option value="1">跳直播间</option>
                                        <option value="2">跳网页</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item" id="jumpUrlArea">
                                <label class="layui-form-label">跳转链接</label>
                                <div class="layui-input-block">
                                    <input type="text" name="jump_url" value="" class="layui-input"
                                        placeholder="内链直接填路径名，外链加http:// （http://），空链可不填">
                                </div>
                            </div>

                            <div class="layui-form-item" id="storeId" style="display: none">
                                <label class="layui-form-label">商品ID</label>
                                <div class="layui-input-block">
                                    <input type="text" name="store_id" value="" class="layui-input"
                                        placeholder="商城banner输入商品ID，跳转商品详情" onkeyup="clearNoNum(this)">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">关联赛事ID</label>
                                <div class="layui-input-block">
                                    <input type="text" name="match_id" placeholder="内跳直播间需关联填写" value=""
                                        class="layui-input" lay-verify="">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">赛事类型</label>
                                <div class="layui-input-block">
                                    <input type="radio" value="2" name="sport_id" title="蓝球" checked />
                                    <input type="radio" value="1" name="sport_id" title="足球" />
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">排序</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sort" placeholder="数值越小越靠前" value="" class="layui-input"
                                        lay-verify="">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">是否启用</label>
                                <div class="layui-input-block">
                                    <input type="radio" value="1" name="status" title="启用" checked />
                                    <input type="radio" value="0" name="status" title="禁用" />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block text-center">
                                    <button class="layui-btn" lay-submit="" lay-filter="ads-add">确认保存</button>
                                    <button class="layui-btn layui-btn-primary" id="close">取消</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/layuiadmin/layui/layui.js"></script>
    <script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.min.js"></script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
            , version: "{:config('other.ui_version')}"
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'form', 'admin', 'ads', 'laydate'], function () {
            var $ = layui.$, form = layui.form, admin = layui.admin, laydate = layui.laydate;
            var index = parent.layer.getFrameIndex(window.name);
            $(this).removeAttr("lay-key");
            laydate.render({
                elem: '#start_date', //指定元素
                trigger: 'click',
                type: 'datetime',
                min: '<?php echo date("Y-m-d H:i:s");?>',
                done: function (value, date, endDate) {
                    $("#maindiv").empty();
                    $("#maindiv").append('<input type="text" name="end_time" class="layui-input"  id="end_date" readonly  placeholder="结束日期" />');
                    laydate.render({
                        elem: '#end_date', //指定元素
                        trigger: 'click',
                        type: 'datetime',
                        min: '<?php echo date("Y-m-d H:i:s");?>',
                    });
                },
            });
            laydate.render({
                elem: '#end_date', //指定元素
                trigger: 'click',
                type: 'datetime',
                min: '<?php echo date("Y-m-d H:i:s");?>',
            });

            form.on('radio(equipment)', function (data) {
                if (data.value == 1) {
                    let html = `<option value="6">首页背景图（1920*647）</option>
                        <option value="10"> 直播页轮播图(1620*180)</option>
                        <option value="11">顶部导航背景图(1920*68)</option>
                        <option value="12">商城首页轮播图(1920*68)</option>
                        <option value="13">主播页广告</option>
                        <option value="14">直播间弹窗广告</option>
                        <option value="15">直播间绑定广告</option>`
                    $("#typeSelect").html(html);
                }

                if (data.value == 2) {
                    let html = `<option value="1">启动页广告</option>
                            <option value="2">首页轮播广告</option>
                            <option value="12">商城首页轮播图</option>
                            <option value="13">主播页广告</option>
                            <option value="14">直播间弹窗广告</option>
                            <option value="15">直播间绑定广告</option>`
                    $("#typeSelect").html(html);
                }

                form.render();
            });

            $('#close').on("click", function () {
                parent.layer.close(index);
            });

            form.on('submit(ads-add)', function (obj) {
                //提交
                if (obj.field.type != 3 && obj.field.image_url.length == 0) {
                    layer.msg('请上传广告图片', { icon: 5 });
                    return;
                }
                admin.req({
                    url: '/admin/ads/add'
                    , data: obj.field
                    , success: function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, { icon: 1, time: 1500 }, function () {
                                parent.window.location.reload();
                            });
                        }
                    }
                });

                return false;
            });

            // 广告位置选择
            form.on('select(type_select)', function (data) {
                let html = ` <option value="1">内部跳转</option><option value="2">外部跳转</option>`
                if (data.value == 12) {
                    html += `<option value="3">功能跳转</option>`
                }
                $("#jumpType").html(html);
                jumpTypeSlect(1)
                form.render();
            });


            // 跳转类型选择
            form.on('select(jump_type)', function (data) {
                jumpTypeSlect(data.value)
            });

            // 跳转类型 商品和连接显示
            function jumpTypeSlect(value) {
                if (value == 3) {
                    $('#storeId').show()
                    $('#jumpUrlArea').hide()
                } else {
                    $('#storeId').hide()
                    $('#jumpUrlArea').show()
                }
                $('#storeId input').val('')
                $('#jumpUrlArea input').val('')

                form.render();
            }


        });

    </script>
</body>

</html>